<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 525px;
				height: 297px;
				position: absolute;
			/*	background: pink;*/
				left: 485px;
    			top: 126px;
			}
			
			.game_box{
				width: 480px;
				height: 50px;
				/*background: pink;*/
				display: flex;
				justify-content: space-around;
				overflow: hidden;
				border-radius: 10px;
				/*border: 1px solid #ccc;*/
				position: relative;
				top: -141px;
    			left: 498px;
			}
			
			.switch_shang{
				width: 30px;
				height: 30px;
				background: transparent;
				position: absolute;
				top: 243px;
   				left: 343px;
				border-radius: 50%;
				cursor: pointer;

			}
					
			.switch_you{
				width: 30px;
				height: 30px;
				background: transparent;
				position: absolute;
				top: 271px;
    			left: 373px;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.switch_xia{
				width: 30px;
				height: 30px;
				background: transparent;
				position: absolute;
				top: 300px;
    			left: 344px;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.switch_zuo{
				width: 30px;
				height: 30px;
				background: transparent;
				position: absolute;
				top: 271px;
    			left: 313px;
				border-radius: 50%;
				cursor: pointer;
			}
			
			.shang{
				background: #ccc;
				color: #fff;
				width: 40px;
				height: 40px;
				line-height: 40px;
				border-radius: 50%;
				text-align: center;
				font-size: 30px;
				transition: 1s;
				margin-top: 5px;
			}
			
			.you{
				background: #ccc;
				color: #fff;
				width: 40px;
				height: 40px;
				line-height: 40px;
				border-radius: 50%;
				text-align: center;
				font-size: 30px;
				transition: 1s;
				margin-top: 5px;
			}
			
			.xia{
				background: #ccc;
				color: #fff;
				width: 40px;
				height: 40px;
				line-height: 40px;
				border-radius: 50%;
				text-align: center;
				font-size: 30px;
				transition: 1s;
				margin-top: 5px;
			}
			
			.zuo{
				background: #ccc;
				color: #fff;
				width: 40px;
				height: 40px;
				line-height: 40px;
				border-radius: 50%;
				text-align: center;
				font-size: 30px;
				transition: 1s;
				margin-top: 5px;
			}
			
			.attack{
				width: 50px;
				line-height: 30px;
				height: 30px;
				border-radius: 10px;
				margin-top: 10px;
				background: #000;
				color: #fff;
				transition: 1s;
			}
			
			.switch_att{
				width: 64px;
				height: 64px;
				border-radius: 50%;
				background: transparent;
				position: absolute;
				right: 348px;
    			top: 254px;
    			cursor: pointer;
    			
			}
			
			.anima{
				width: 111px;
				height: 217px;
				/*border: 1px solid #000;*/
				background-image: url("imges/animation.jpeg");
				background-position:0px -47px ;
				background-repeat:no-repeat ;
				position: absolute;
				top: 137px;
   			 	left: 507px;
   			 	/*transition: 1s;*/
			}
			
			.anima:nth-of-type(1){
				/*display: none;*/
				transition: 2s;
			}
			
			.anima:nth-of-type(2){
				background-position:-130px -47px;			
				opacity: 0;
				transition: 3s;
			}
			
			.anima:nth-of-type(3){
				background-position:-252px -47px;
				opacity: 0;
				transition: 3s;
			}
			
			.anima:nth-of-type(4){
				background-position:-380px -47px;
				opacity: 0;
				transition: 3s;
			}
			
			.anima:nth-of-type(5){
				background-position:-509px -47px;
				opacity: 0;
				transition: 4s;
			}
			
			.anima:nth-of-type(6){
				background-position:-633px -47px;
				opacity: 0;
				transition: 4s;
			}
			
			.anima:nth-of-type(7){
				background-position:-757px -47px;
				opacity: 0;
				transition: 5s;
			}
			
			.anima:nth-of-type(8){
				background-position:-880px -47px;
				opacity: 0;
				transition: 5s;
			}
		</style>
	</head>
	<body>
		<img style="margin-left: 200px" src="imges/switc.jpg"/>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="anima"></div>
		<div class="box"></div>
		<div class="game_box">
			<div class="shang">↑</div>
			<div class="you">→</div>
			<div class="xia">↓</div>
			<div class="shang">↑</div>
			<div class="xia">↓</div>
			<div class="zuo">←</div>
			<div class="you">→</div>
			<div class="shang">↑</div>
			<div class="attack">attack</div>
		</div>
		
			<div class="switch_shang"></div>
			<div class="switch_you"></div>
			<div class="switch_xia"></div>
			<div class="switch_zuo"></div>
			<div class="switch_att"></div>
					
		<script type="text/javascript">
			var switch_shang=document.getElementsByClassName("switch_shang")[0];
			var switch_you=document.getElementsByClassName("switch_you")[0];
			var switch_xia=document.getElementsByClassName("switch_xia")[0];
			var switch_zuo=document.getElementsByClassName("switch_zuo")[0];
			var switch_att=document.getElementsByClassName("switch_att")[0];
			var shang=document.getElementsByClassName("shang");	
			var you=document.getElementsByClassName("you");	
			var xia=document.getElementsByClassName("xia");	
			var zuo=document.getElementsByClassName("zuo");				
			
			var count_shang=0;
			var count_you=0;
			var count_xia=0;
			var count_zuo=0;
			switch_shang.onclick=function(){				
							
				shang[count_shang].style.background="grey";
				shang[count_shang].style.color="#000";
				count_shang++;	
				console.log(count_shang);
			}
			
			switch_you.onclick=function(){				
					
				you[count_you].style.background="grey";
				you[count_you].style.color="#000";
				count_you++;				
			}
			
			switch_xia.onclick=function(){				
						
				xia[count_xia].style.background="grey";
				xia[count_xia].style.color="#000";
				count_xia++;				
			}
			
			switch_zuo.onclick=function(){				
				
				zuo[count_zuo].style.background="grey";
				zuo[count_zuo].style.color="#000";
				count_zuo++;				
			}
			
			switch_att.onclick=function(){				
				var att=document.getElementsByClassName("attack")[0];	
				var anima=document.getElementsByClassName("anima");
				var num=1;
				att.style.background="grey";
				att.style.color="#000";
				for(var j=0;j<anima.length;j++){
					anima[j].style.opacity="1";	
//					att[j+1].style.opacity="1";
				}
				for(var i=0;i<shang.length;i++){
					shang[i].style.background="#ccc";
					shang[i].style.color="#fff";
				}
				for(var i=0;i<you.length;i++){
					you[i].style.background="#ccc";
					you[i].style.color="#fff";
				}
				for(var i=0;i<xia.length;i++){
					xia[i].style.background="#ccc";
					xia[i].style.color="#fff";
				}
				for(var i=0;i<zuo.length;i++){
					zuo[i].style.background="#ccc";
					zuo[i].style.color="#fff";
				}
				
				
			}	
		</script>
	</body>
</html>
